<template>
	<view class="content" >
	<view class="top"></view>
	<view class="banner">
		<dl>
			<dt><image :src="userInfo.avatarUrl" mode=""></image></dt>
			<dd>{{ userInfo.nickname }}</dd>
		</dl>
		<view class="img">
			<image v-if="qrUrl" :src="qrUrl" mode=""></image>
		</view>
		<view class="sharbuttn">
			<view v-if="qrUrl" class="btn" @click="save">保存二维码</view>
		</view>
		<view class="shartitle"><view>分享</view></view>
		<view class="sharapk">
			<view><button open-type="share"><image src="../../static/weact.png"></image></button></view>
		</view>
		<view class="bottom">
			<ul>
				<li>1、分享该页给好友，购买后获取佣金</li>
				<li>2、分享二维码给好友，购买后获取佣金</li>
			</ul>
		</view>
	</view>
	
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';  
	export default {
		data(){
			return {
				qrUrl: ''
			}
		},
		onLoad() {
			uni.showLoading({
				title: '正在获取'
			})
			this.$api.request('distribution', 'getQRCode', {
				
			}, failres => {
				uni.hideLoading()
				this.$api.msg(failres.errmsg)
			}).then(res => {
				uni.hideLoading()
				this.qrUrl = res.data
			})
		},
		onShareAppMessage() {
			return {
				title: '秋歌体验田-微信小程序',
				imageUrl: 'https://unimall-asset.oss-cn-beijing.aliyuncs.com/share-jsy.png',
				path: '/pages/index/index?distribution=' + this.userInfo.distributionId
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods:{
			//保存图片到相册
			save() {
				const that = this
				uni.showLoading({
					title: '正在下载'
				})
				uni.downloadFile({
					url: this.qrUrl,
					success(res) {
						if (res.statusCode === 200) {
							console.log(res);
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success() {
									that.$api.msg('保存成功')
								},
								fail(e) {
									console.log(e)
									that.$api.msg('保存失败')
								}
							})
						}
					}
				})
			}
		}
	}
	
	
</script>

<style>
	.top{
		width: 100%;
		height:230upx;
		background-size:100% ;
		background-position:center center;
	}
	.tugurl{
		color: #999;
	}
	.sharbuttn{
		display: flex;
		justify-content: center;
	}
	.shartitle{
		    width: 80%;
			text-align: center;
			margin-left: 10%;
			border-bottom: 1px solid #dddddd;
			position: relative;
			height: 60upx;
	}
	.tgtit{
		text-align: center;
	}
	.shartitle view{
		    height: 50upx;
			line-height: 50upx;
			font-size: 28upx;
			color: #999;
			width: 120upx;
			margin: 32upx auto;
			position: absolute;
			background: #fff;
			left: 50%;
			margin-left: -60upx;
	}
	.sharapk{
	 display: flex;
	 justify-content: center;
	 margin: 20upx auto
	}
	.sharapk view{
		margin: 40upx;
	}
	.sharapk view image{
		height: 80upx;
		width: 80upx;
	}
	.content{
		width: 100%;
		background-color: #ffffff;
	}
	.banner{
		width: 100% ;
		background-color: #FFFFFF;
		border-radius: 60upx 60upx 0 0;
		margin-top: -60upx;
	}
	.banner dl{
		margin-top: -80upx;
	}
	.banner dl dt{
		text-align: center;
	}
	.banner dl dt image{
		width: 160upx;
		height: 160upx;
		border-radius:50% ;
	}
	.banner dl dd{
		text-align: center;
	}
	.img{
		width: 300upx;
		height: 300upx;
		background-color: white;
		margin: 0 auto;
		margin-top: 60upx;
	}
	.img image{
		width: 100%;
		height: 100%;
	}
	.btn{
		width: 260upx;
		height: 60upx;
		line-height: 60upx;
		margin: 0 auto;
		margin-top: 60upx;
		border-radius: 40upx;
		border: 0;
		font-size: 26upx;
		outline: 0;
		background: #33b17b;
		color: #FFFFFF;
		text-align: center;
	}
	.bottom{
		width: 100%;
		height: 400upx;
	/* 	background: url(../../static/img/beij.png) no-repeat; */
		background-position:left bottom;/* 设置背景图片位置 */
		background-size: 20%;
	}
	.bottom ul{
		padding-left: 40upx;
		box-sizing: border-box;
	}
	.bottom ul li{
		width: 100%;
		height: 60upx;
	}
	button::after {
		border: none;
		background: #FFFFFF;
	}
</style>
